<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax-baidu2</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        #case9-demo4 {
            position: absolute;
            top: 30%;
        }

        input:hover,
        input:focus {
            border: 2px solid #00167b;
        }

        ul {
            list-style: none;
        }

        li {
            margin-top: 5px;
        }

        a {
            text-decoration: none;
            font-size: 18px;
            color: black;
        }

        a:hover,
        a:focus {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="case9-demo4" class="col-sm-4 col-sm-offset-4">
    <input type="text" name="form-control" v-model="wd" v-on:input="baiduS" class="form-control">
    <ul>
        <li v-for="value in obj">
            <a v-bind:href="'https://www.baidu.com/s?wd='+value.q">{{value.q}}</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var case9Demo4 = new Vue({
        el: "#case9-demo4",
        data: {
            obj: {},
            wd: ""
        },
        methods: {
            baiduS: function () {
                this.$http.jsonp("https://www.baidu.com/sugrec", {
                    params: {
                        wd: this.wd,
                        prod: "pc"
                    }
                })
                    .then((response) => {
                        this.obj = response.data.g
                    }, (error) => {
                        console.log("获取失败")
                    })
            }
        }
    })
</script>
</body>
</html>